<template>
    <view class="columnbox wdh-100 content">
        <view class="columnbox wdh-100 score-box">
            <view class="score-num">{{walletinfo.integral}}</view>
            <view class="score-title">我的积分</view>
            <view class="rowbox score-record">
                <view class="score-title" @click="showRecord">兑换记录</view>
                <view class="score-title">|</view>
                <view class="score-title" @click="jifenmingxi1">积分明细</view>
            </view>
        </view>
        <view class="wdh-100 s-list">
            <view class="coupon-box one-store" v-for="(item,index) in arr" :key='index'>
                <image mode="aspectFill" class="store-img"
                    :src="item.url">
                </image>
                <view class="s-title wdh-100 textovflow">{{item.goodsName}}</view>
                <view class="rowbox wdh-100 spb" style="margin-bottom: 20rpx;">
                    <view class="s-price">{{item.realIntegralPrice}}积分</view>
                    <view class="dh-btn" @click="lijiduihuan(item.id)">立即兑换</view>
                </view>
            </view>
			
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				walletinfo:{},//用户钱包信息
				total:10,
				arr:[],//列表
				pageNum:1
			}
        },
		onLoad() {
			this.getList();
			this.getWallet();
		},
		onReachBottom(){
			if(this.arr.length == this.total){
				return false;
			}
			this.$modal.loading('加载中')
			this.pageNum++;
			this.getList();
		},
        methods: {
			//获取列表
			getList(){
				let data = {
					  productType: 0,
					  isVirtual: 0,
					  shelfChannel: 0,
					  shelfStatus: 0,
					  pageSize:20,
					  pageNum:this.pageNum,
				}
				this.$req.get('/xcx/productInfo/list',data).then(res=>{
					// console.log(res);
					this.$modal.closeLoading();
					if(res.data.code==200){
						this.arr = this.arr.concat(res.data.rows);
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			getWallet() {
				this.$req.get('/xcx/userWallet').then(res => {
					if (res.data.data) {
						this.walletinfo = res.data.data;
						this.total = res.data.total;
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			// 积分明细
			jifenmingxi1(){
				this.$tab.navigateTo('/packageA/pointsBreakdown/pointsBreakdown')
			},
			// 立即兑换
			lijiduihuan(index){
				this.$tab.navigateTo('/packageB/cashdetails/cashdetails?id='+index)
			},
            showRecord() {
                uni.navigateTo({
                    url: '/pages/scoreStore/record'
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background: #f7f8fa;
        min-height: 100vh;
        justify-content: flex-start;
        font-family: PingFang SC;
        width: 100%;
        overflow: hidden;
        padding: 20rpx 32rpx;
    }

    .score-box {
        background: #17698F;
        height: 360rpx;
        border-radius: 20rpx;
        color: #fff;

        .score-num {
            font-size: 50rpx;
        }

        .score-title {
            font-size: 28rpx;
            margin-top: 10rpx;
        }

        .score-record {
            justify-content: space-between;
            width: 400rpx;
            margin-top: 50rpx;
        }
    }

    .s-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 20rpx;

        .one-store {
            border-radius: 20rpx;
            width: 339rpx;
            background: #fff;
            overflow: hidden;
            margin-bottom: 20rpx;

            .store-img {
                border-radius: 20rpx;
                width: 100%;
                height: 220rpx;
            }
        }

        .s-title {
            font-size: 32rpx;
            padding: 10rpx 20rpx;
        }

        .s-price {
            color: #BD3124;
            font-size: 28rpx;
            margin-left: 20rpx;
        }

        .dh-btn {
            background: #17698F;
            color: #fff;
            font-size: 24rpx;
            padding: 10rpx 20rpx;
            line-height: 24rpx;
            margin-right: 20rpx;
            border-radius: 10rpx;
        }
    }
</style>